<template>
  <div ref="editorContainer" class="h-full w-full"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as monaco from 'monaco-editor'

const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})

const editorContainer = ref(null)
let editor = null

onMounted(() => {
  if (!editorContainer.value) return
  
  editor = monaco.editor.create(editorContainer.value, {
    value: props.content,
    language: 'javascript',
    theme: 'vs-dark',
    automaticLayout: true,
    minimap: {
      enabled: true
    },
    fontSize: 14,
    lineNumbers: 'on',
    scrollBeyondLastLine: false,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: 'line',
    selectOnLineNumbers: true,
    contextmenu: true,
    scrollbar: {
      useShadows: false,
      verticalHasArrows: false,
      horizontalHasArrows: false,
      vertical: 'visible',
      horizontal: 'visible',
      verticalScrollbarSize: 10,
      horizontalScrollbarSize: 10,
      arrowSize: 30
    }
  })
})

// 监听内容变化
watch(() => props.content, (newContent) => {
  if (editor && newContent !== editor.getValue()) {
    editor.setValue(newContent)
  }
})

onBeforeUnmount(() => {
  if (editor) {
    editor.dispose()
  }
})
</script>

<style scoped>
.editor-container {
  height: 100%;
  width: 100%;
}
</style>